﻿// setInterval(function(){
// try{
//   $("#program_"+selectid).find(".resize-panel").css("width",parseInt($("#program_"+selectid).outerWidth())).css("height",parseInt($("#program_"+selectid).outerHeight()));
//   overlap();
// Zonexy($("#program_"+selectid));
// }catch(ex){


// } 

// },200);


(function($) { 
  
 /** 
  * 默认参数 
  */
 var defaultOpts = { 
  stage: document, //舞台 
  item: 'resize-item', //可缩放的类名 
 }; 
  
 /** 
  * 定义类 
  */
 var ZResize = function(options) { 
  this.options = $.extend({}, defaultOpts, options); 
  this.init(); 
 } 
  
 ZResize.prototype = { 
  init: function() { 
   this.initResizeBox(); 
  }, 
  /** 
   * 初始化拖拽item 
   */
  initResizeBox: function() { 
   var self = this; 
   $(self.options.item).each(function () { 
    //创建面板 
    var width = $(this).width(); 
    var height = $(this).height(); 
    var resizePanel = $('<div class="resize-panel"></div>'); 
    resizePanel.css({ 
     width: width, 
     height: height, 
     top: 0, 
     left: 0, 
     position: 'absolute', 
     //'background-color': 'rgba(0,0,0,0.5)', 
     cursor: 'move', 
     display: 'none'
    }); 
    self.appendHandler(resizePanel, $(this)); 
    /** 
     * 创建控制点 
     */
    var n = $('<div class="n"></div>');//北 
    var s = $('<div class="s"></div>');//南 
    var w = $('<div class="w"></div>');//西 
    var e = $('<div class="e"></div>');//东 
    var ne = $('<div class="ne"></div>');//东北 
    var nw = $('<div class="nw"></div>');//西北 
    var se = $('<div class="se"></div>');//东南 
    var sw = $('<div class="sw"></div>');//西南 
  
    //添加公共样式 
    self.addHandlerCss([n, s, w, e, ne, nw, se, sw]); 
    //添加各自样式 
    n.css({ 
     'top': '-4px', 
     'margin-left': '-4px', 
     'left': '50%', 
     'cursor': 'n-resize'
    }); 
    s.css({ 
     'bottom': '-1px', 
     'margin-left': '-4px', 
     'left': '50%', 
     'cursor': 's-resize'
    }); 
    e.css({ 
     'top': '50%', 
     'margin-top': '-4px', 
     'right': '-1px', 
     'cursor': 'e-resize'
    }); 
    w.css({ 
     'top': '50%', 
     'margin-top': '-4px', 
     'left': '-4px', 
     'cursor': 'w-resize'
    }); 
    ne.css({ 
     'top': '-4px', 
     'right': '-1px', 
     'cursor': 'ne-resize'
    }); 
    nw.css({ 
     top: '-4px', 
     'left': '-4px', 
     'cursor': 'nw-resize'
    }); 
    se.css({ 
     'bottom': '0px', 
     'right': '0px', 
     'cursor': 'se-resize'
    }); 
    sw.css({ 
     'bottom': '-1px', 
     'left': '-3px', 
     'cursor': 'sw-resize'
    }); 
  
    // 添加项目 
    self.appendHandler([n, s, w, e, ne, nw, se, sw], resizePanel); 
      
    //绑定拖拽缩放事件 
    self.bindResizeEvent(resizePanel, $(this)); 
  
    //绑定触发事件 
    self.bindTrigger($(this)); 
   }); 
   self.bindHidePanel(); 
  }, 
  //控制点公共样式 
  addHandlerCss: function(els) { 
   for(var i = 0; i < els.length; i++) { 
    el = els[i]; 
    el.css({ 
     position: 'absolute', 
     width: '8px', 
     height: '8px', 
     background: '#ff6600', 
     margin: '0', 
     'border-radius': '2px', 
     border: '1px solid #dd5500', 
    }); 
   } 
  }, 
  /** 
   * 插入容器 
   */
  appendHandler: function(handlers, target) { 
   for(var i = 0; i < handlers.length; i++) { 
    el = handlers[i]; 
    target.append(el); 
   } 
  }, 
  /** 
   * 显示拖拽面板 
   */
  triggerResize: function(el) { 
   var self = this; 
   el.siblings(self.options.item).children('div').css({ 
    display: 'none'
   }); 
   el.children('div').css({ 
    display: 'block'
   }); 


   
  }, 
  /** 
   * 拖拽事件控制 包含8个缩放点 和一个拖拽位置 
   */
  bindResizeEvent: function(el) { 
  
   var self = this; 
   var ox = 0; //原始事件x位置 
   var oy = 0; //原始事件y位置 
   var ow = 0; //原始宽度 
   var oh = 0; //原始高度 
  
   var oleft = 0; //原始元素位置 
   var otop = 0; 
   var org = el.parent('div'); 
  
   //东 
   var emove = false; 
   el.on('mousedown','.e', function(e) { 
    ox = e.pageX;//原始x位置 
    ow = el.width(); 
    emove = true;   
    //Zonexy($("#program_"+selectid),1);
 
   }); 
  
   //南 
   var smove = false; 
   el.on('mousedown','.s', function(e) { 
    oy = e.pageY;//原始x位置 
    oh = el.height(); 
    smove = true; 
    // Zonexy($("#program_"+selectid),1);
   
   }); 
  
   //西 
   var wmove = false; 
   el.on('mousedown','.w', function(e) { 
    ox = e.pageX;//原始x位置 
    ow = el.width(); 
    wmove = true; 
    oleft = parseInt(org.css('left').replace('px', ''));   
    // Zonexy($("#program_"+selectid),1);
   }); 
  
   //北 
   var nmove = false; 
   el.on('mousedown','.n', function(e) { 
    oy = e.pageY;//原始x位置 
    oh = el.height(); 
    nmove = true; 
    otop = parseInt(org.css('top').replace('px', ''));   
    // Zonexy($("#program_"+selectid),1);
   }); 
  
   //东北 
   var nemove = false; 
   el.on('mousedown','.ne', function(e) { 
    ox = e.pageX;//原始x位置 
    oy = e.pageY; 
    ow = el.width(); 
    oh = el.height(); 
    nemove = true; 
    otop = parseInt(org.css('top').replace('px', ''));    
    //Zonexy($("#program_"+selectid),1);
   }); 
  
  //
   //西北 
   var nwmove = false; 
   el.on('mousedown','.nw', function(e) { 
    ox = e.pageX;//原始x位置 
    oy = e.pageY; 
    ow = el.width(); 
    oh = el.height(); 
    otop = parseInt(org.css('top').replace('px', '')); 
    oleft = parseInt(org.css('left').replace('px', '')); 
    nwmove = true;   
    // Zonexy($("#program_"+selectid),1);
   }); 

   //东南 
   var semove = false; 
   el.on('mousedown','.se', function(e) { 
    ox = e.pageX;//原始x位置 
    oy = e.pageY; 
    ow = el.width(); 
    oh = el.height(); 
    semove = true;   
    // Zonexy($("#program_"+selectid),1);
   }); 
  
   //西南 
   var swmove = false; 
   el.on('mousedown','.sw', function(e) { 
    ox = e.pageX;//原始x位置 
    oy = e.pageY; 
    ow = el.width(); 
    oh = el.height(); 
    swmove = true; 
    oleft = parseInt(org.css('left').replace('px', ''));   
    // Zonexy($("#program_"+selectid),1);
   }); 
  
   //拖拽 
   var drag = false; 
   el.on('mousedown', function(e) { 


    ox = e.pageX;//原始x位置 
    oy = e.pageY; 
    otop = parseInt(org.css('top').replace('px', '')); 
    oleft = parseInt(org.css('left').replace('px', '')); 
    drag = true;    

   var self=$(this).parent().attr("id").split('_')[1];
 //console.log();

 $("#material li").eq($(this).parent().index()).click();
 
selectid=self;
    Zonexy($("#program_"+selectid),1);
   }
  
  ); 
  
   $(self.options.stage).on('mousemove', function(e) { 
//console.log(e);
    if(emove) { 
     var x = (e.pageX - ox); 
     el.css({ 
      width: ow + x 
     }); 
     org.css({ 
      width: ow + x 
     }); 
    } else if(smove) { 
     var y = (e.pageY - oy); 
     el.css({ 
      height: oh + y 
     }); 
     org.css({ 
      height: oh + y 
     }); 
    } else if(wmove) { 
     var x = (e.pageX - ox); 
     el.css({ 
      width: ow - x, 
      // left: oleft + x 
     }); 
     org.css({ 
      width: ow - x, 
      left: oleft + x 
     }); 
    } else if(nmove) { 
     var y = (e.pageY - oy); 
     el.css({ 
      height: oh - y, 
      // top: otop + y 
     }); 
     org.css({ 
      height: oh - y, 
      top: otop + y 
     }); 
    } else if(nemove) { 
     var x = e.pageX - ox; 
     var y = e.pageY - oy; 
     el.css({ 
      height: oh - y, 
      // top: otop + y, 
      width: ow + x 
     }); 
     org.css({ 
      height: oh - y, 
      top: otop + y, 
      width: ow + x 
     }); 
    } else if(nwmove) { 
     var x = e.pageX - ox; 
     var y = e.pageY - oy; 
     el.css({ 
      height: oh - y, 
      // top: otop + y, 
      width: ow - x, 
      // left: oleft + x 
     }); 
     org.css({ 
      height: oh - y, 
      top: otop + y, 
      width: ow - x, 
      left: oleft + x 
     }); 
    } else if(semove) { 
     var x = e.pageX - ox; 
     var y = e.pageY - oy; 
     el.css({ 
      width: ow + x, 
      height: oh + y 
     }); 
     org.css({ 
      width: ow + x, 
      height: oh + y 
     }); 
    } else if(swmove) { 
     var x = e.pageX - ox; 
     var y = e.pageY - oy; 
     el.css({ 
      width: ow - x, 
      // left: oleft + x, 
      height: oh + y 
     }); 
     org.css({ 
      width: ow - x, 
      left: oleft + x, 
      height: oh + y 
     }); 
    } else if(drag) { 
     var x = e.pageX - ox; 
     var y = e.pageY - oy; 
     org.css({ 
      left: oleft + x, 
      top: otop + y 
     }); 
    } 
    try{
    Zonexy($("#program_"+selectid),1);

  }catch(ex){
  }
}).on('mouseup', function(e) { 
    emove = false; 
    smove = false; 
    wmove = false; 
    nmove = false; 
    nemove = false; 
    nwmove = false; 
    swmove = false; 
    semove = false; 
    drag = false; 
  try{
//  Zonexy($("#program_"+selectid),1);
  }catch(ex){

  }
   }); 
  }, 
  /** 
   * 点击item显示拖拽面板 
   */
  bindTrigger: function(el) { 
   var self = this; 
  //  console.log("td");
   // el.click();
//   Zonexy($("#program_"+selectid));

   el.on('click', function(e) { 

  
    

     //console.log($(this).index());
    
       var  valid=self.options.item;var id=self.options.item;
       //alert(valid);
     //  console.log(valid[0].attr("id"));
     try{
       valid=valid.split('_');
       selectid=valid[1]; 
   //     Zonexy($("#program_"+selectid));
     }catch(ex){
        //selectid=$(this).attr("id").split('_')[1];

      //  console.log("ok:"+selectid);
        //console.log($(this).attr("id"));
        return false;
     }
      //console.log(selectid);
    
  
   $(id).find(".resize-panel").css("width",parseInt($(self.options.item).outerWidth())+"px");
   $(id).find(".resize-panel").css("height",parseInt($(self.options.item).outerHeight())+"px");


  // $(id).find(".resize-panel").css("top",$(self.options.item).position().top+"px");
   //$(id).find(".resize-panel").css("left",$(self.options.item).position().left+"px");

    $("#from_"+selectid).find("#width").val(parseInt($(self.options.item).outerWidth()));
    $("#from_"+selectid).find("#high").val(parseInt($(self.options.item).outerHeight()));


    var left=$(id).position().left;
    var top=$(id).position().top;
     top=parseInt(top);
     var zoomsum=parseInt($("#zoomsum").text());
     if(zoomsum>0){
        zoomsum=zoomsum*2;
        left=left/zoomsum;
        top=top/zoomsum;
        left=parseInt(left); top=parseInt(top);

        var w=$(self.options.item).outerWidth()/zoomsum
        var h=$(self.options.item).outerHeight()/zoomsum

        // $(id).find(".resize-panel").css("width",parseInt(w)+"px");
        // $(id).find(".resize-panel").css("height",parseInt(h)+"px");

      // w=w-4;
        // h=h-4
         
        $("#from_"+selectid).find("#width").val(parseInt(w));
        $("#from_"+selectid).find("#high").val(parseInt(h));


     }
    if(left>0){
       

        $("#from_"+selectid).find("#left").val(left);
    }else{

        $("#from_"+selectid).find("#left").val(0);
        $(id).css("left","0px");
    }
    if(top>0){
        $("#from_"+selectid).find("#top").val(top);
    }else{
        $(id).css("top","0px");
        $("#from_"+selectid).find("#top").val(0);
    }
    //left
    //top
    $("#material li").eq($(this).index()).click();

    e.stopPropagation(); 
    self.triggerResize(el); 

   // new ZResize({ 
     //   stage: "#program", //舞台 
      //  item: '#program_'+selectid, //可缩放的类名 

   }); 
   
  }, 
  /** 
   * 点击舞台空闲区域 隐藏缩放面板 
   */
  bindHidePanel: function(el) { 

   var stage = this.options.stage; 
   var item = this.options.item; 
   $(stage).bind('click', function() {   
      //  console.log($(this).attr("id"));
      //onblurdiv();
    $(item).children('div').css({ 
    //  display: 'none'
    }); 
   }) 
  } 
 } 

 window.ZResize = ZResize; 
  
})(jQuery); 

